import React from "react";
import "./index.scss";
import store from "../../store/login/index";
import { getInitList } from "../../store/login/actionCreators";
import { Layout, Menu } from "antd";
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import ButtonSize from "../../component/ButtonSize";
import ButtonDisabled from "../../component/ButtonDisabled";
import ButtonLoading from "../../component/ButtonLoading";

const { Header, Sider, Content } = Layout;

export default class login extends React.Component {
  constructor(props) {
    super(props);
    store.subscribe(this.handleStoreChange);
  }

  state = store.getState();

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  contentSelect = (e) => {
    this.setState({
      currentContent: e.key,
    });
  };

  componentDidMount() {
    this.setState({
      initHeight: window.innerHeight + "px",
    });
     const action = getInitList();
     store.dispatch(action);
  }

  handleStoreChange = () => {
    this.setState(store.getState());
  };

  render() {
    const { value, initHeight, currentContent } = this.state;
    return (
      <Layout style={{ height: initHeight }}>
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu
            onClick={this.contentSelect}
            theme="dark"
            mode="inline"
            defaultSelectedKeys={["1"]}
          >
            <Menu.Item key="1" icon={<UserOutlined />}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            <div
              className={currentContent === "1" ? "contentShow" : "contentHide"}
            >
              <ButtonSize></ButtonSize>
            </div>

            <div
              className={currentContent === "2" ? "contentShow" : "contentHide"}
            >
              <ButtonDisabled></ButtonDisabled>
            </div>
            <div
              className={currentContent === "3" ? "contentShow" : "contentHide"}
            >
              <ButtonLoading></ButtonLoading>
            </div>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
